很開心的把表格的功能做完,但我似乎忘記了很多事情,如果它是個 todo list,那是不是除了新增,還要有刪除、修改、是否完成的狀態呢?恭喜我,終於想起來了呢,這個畫面是不是似曾相似呢 XD,該繼續來填坑了呢!
在 react 中,利用 state,可以將 UI 與資料內容綁定,這點在 class 或者 function 元件中都是一樣的,而一般學 react hook 時會碰到的第一個 hook 就是 useState()。
react hook 的規則 :
const [count, setCount] = useState(0);
因為操作是不需要被 useTable 掌管的資料,所以讓它脫離掌控!
...
<Thead>
{table.getHeaderGroups().map((headerGroup) => (
<Tr>
{headerGroup.headers.map((header) => (
<Th
{...{
className: header.column.getCanSort()
? "cursor-pointer select-none"
: "",
onClick: header.column.getToggleSortingHandler(),
}}
>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
{{
asc: " ?",
desc: " ?",
}[header.column.getIsSorted() as string] ?? null}
</Th>
))}
<Th>操作</Th> // 增加操作表頭
</Tr>
))}
</Thead>
<Tbody>
{table.getRowModel().rows.map((row) => (
<Tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<Td key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</Td>
))}
<Td>
<button className="px-[2px]">修改</button> // 增加與操作相應的內容
<button className="px-[2px]">刪除</button>
</Td>
</Tr>
))}
</Tbody>
...
說到修改,就是要在點擊之後,去找到目前的 todo 是哪一個,去修改它的內容,我這次想用獨一 id 的方式去做這個功能,所以在原本的 list 裡面再添加一個 id :
const [list, setList] =
useState <
any >
(() => [
{
id: "1",
time: "2018-07-22",
title: "購物",
info: "日用品",
checked: false,
},
{
id: "2",
time: "2022-09-15",
title: "鐵人賽",
info: "day-10",
checked: true,
},
{ id: "3", time: "2022-09-25", title: "摺棉被", info: "", checked: false },
]);
但後來加上刪除功能之後發現,因為 list 改變之後,本來放在元素上面的 id 因為重新渲染改變,但 list 裡面待辦事項的 id 並不會因此改變,這個問題我想先保留下來,在未來找個時間來進行處理。
<button
className="px-[2px]"
id={row.id}
onClick={(e) => {
const id = e.currentTarget.id;
const currentItem = list[id];
}}
>
修改
</button>
本來是一樣使用找 id 的方式取得要刪除的待辦事項,後來我改用取得畫面資料來跟 list 中資料對造的方式來找出需要刪除的項目 :
<button
className="px-[2px]"
id={row.id}
onClick={(e) => {
const id = e.currentTarget.id;
const currentItem = list[id];
const nowList = list.filter((i) => i !== currentItem);
setList(nowList);
}}
>
刪除
</button>
寫完修改與刪除(雖然修改還沒完成,但就差一點點了),腦海中對於 react 中的 state 與畫面綁定的觀念會有比較深刻的印象,這個觀念在實作當中是相當重要的。